<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>环境数据 WebSocket 测试</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        h2 {
            margin-top: 0;
        }
        .warning {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="section">
    <h2>空气温湿度数据</h2>
    <div>
        <strong>温度：</strong> <span id="temperature">--</span> °C <br>
        <strong>湿度：</strong> <span id="humidity">--</span> % <br>
        <strong>采集时间：</strong> <span id="collectionTime">--</span>
    </div>
</div>

<div class="section">
    <h2>土壤湿度实时数据</h2>
    <div id="dataBox">等待接收数据...</div>
    <br/>
    <input type="text" id="inputData" placeholder="输入测试数据"/>
    <button onclick="sendMessage()">发送测试数据</button>
</div>

<div class="section">
    <h2>警告信息</h2>
    <div id="warningBox" class="warning">等待警告...</div>
</div>

<script>
    let stompClient = null;

    function connectWebSocket() {
        const socket = new SockJS("http://localhost:8080/gsas/api/v1/environment/subscribe");
        stompClient = Stomp.over(socket);

        stompClient.connect({}, (frame) => {
            console.log("连接成功：" + frame);

            // 订阅空气温湿度
            stompClient.subscribe("/topic/air_data", (response) => {
                const data = JSON.parse(response.body);
                document.getElementById('temperature').innerText = data.air_temperature;
                document.getElementById('humidity').innerText = data.air_humidity;
                document.getElementById('collectionTime').innerText = data.collection_time;
                console.log("接收到空气数据：", data);
            });

            // 订阅土壤湿度
            stompClient.subscribe("/topic/soil_moisture", (message) => {
                document.getElementById("dataBox").innerText = "收到数据：" + message.body;
                console.log("接收到土壤湿度数据：", message.body);
            });

            // 订阅警告信息
            stompClient.subscribe("/topic/soil_moisture_warn", (message) => {
                const warning = JSON.parse(message.body);
                document.getElementById("warningBox").innerText = "警告: " + warning.message;
                console.log("接收到警告：", warning);
            });
        }, (error) => {
            console.error("连接失败", error);
        });
    }

    function sendMessage() {
        const data = document.getElementById("inputData").value;
        if (stompClient && stompClient.connected) {
            stompClient.send("/app/soilMoisture", {}, data);
            console.log("发送数据：" + data);
        } else {
            alert("WebSocket 连接未建立！");
        }
    }

    // 自动连接
    connectWebSocket();
</script>
</body>
</html>
